<template>
    <div class="dashboard-container">
        <div v-for="(role,index) in roles" :key="index">
            <ManageComponents v-if="role==='generalManager'"></ManageComponents>
            <CenterComponents v-else-if="role==='centerManager'"></CenterComponents>
            <!-- <DepartComponents v-else-if="role==='secondaryManager'"></DepartComponents>
            <TeamLeaderComponents v-else-if="role==='teamLeader'"></TeamLeaderComponents>
            <EmployeeComponents v-else-if="role==='teamer'"></EmployeeComponents> -->
            <fontComponents v-else-if="index===role.length-1"></fontComponents>
        </div>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
import ManageComponents from '@/views/ddi/dashboard'
import CenterComponents from '@/views/ddi/center'
// import ManageComponents from '@/views/ddi/dashboard'
// import ManageComponents from '@/views/ddi/dashboard'
// import ManageComponents from '@/views/ddi/dashboard'
import fontComponents from '@/views/dashboard/index.vue'
export default {
    name:"Dashboard",
    components:{
        ManageComponents,
        CenterComponents,
        fontComponents
    },
    computed:{
        ...mapGetters(['name']),
        roles:function(){
            return this.$store.state.user.roles
        }
    }
}
</script>